@use 'sass:map';
@use '../core' as *;

.options {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.noContent {
    margin-top: $spacing-size-8;
    text-align: center;
}

.content {
    display: inline-block;
    overflow-y: auto;
    height: 100%;
    margin-top: $spacing-size-4;

    > .option:nth-child(even) {
        background-color: var(--color-util-brand-50);

        #{$selector-darkmode} & {
            background-color: var(--color-util-brand-50);
        }
    }
}

.option {
    display: flex;
    flex-direction: column;
    padding: $spacing-size-2 0 $spacing-size-4;
    border-top: 1px solid var(--color-border-primary);
    gap: $spacing-size-2;

    &:last-child {
        border-bottom: 1px solid var(--color-border-primary);
    }

    .option {
        border-top: 1px dashed var(--color-border-primary);

        &:last-child {
            border-bottom: none;
        }
    }

    > * {
        padding-left: $spacing-size-2;
        padding-right: $spacing-size-2;
    }

    &.hidden {
        display: none;
    }

    h3 {
        position: relative;
        margin-top: 0;
        margin-bottom: 0;

        &.hasPrefix {
            margin-top: $spacing-size-4;
        }
    }

    .expandable {
        outline: none;
        cursor: pointer;

        h3 {
            display: flex;
            align-items: center;
            color: var(--color-link);
            transition: color $transition-default-timing;
        }

        :global(.icon) {
            --icon-size: 1em;

            margin-left: auto;
            transition:
                transform 0.3s ease-out,
                fill $transition-default-timing;
        }

        &:hover {
            color: var(--color-link-hover);
        }

        &.expanded {
            :global(.icon) {
                transform: rotate(90deg);
            }
        }
    }

    .children {
        padding-left: $spacing-size-2;
        padding-right: $spacing-size-2;
        margin-top: $spacing-size-2;
        margin-bottom: -$spacing-size-4;

        &.hidden {
            display: none;
        }

        .option > *:not(input),
        .option > .metaList {
            padding-left: 0;
            padding-right: 0;
        }
    }

    pre {
        margin-top: $spacing-size-4;
        margin-bottom: 0;
    }
}

.prefix {
    color: var(--color-fg-secondary);
    font-weight: var(--text-regular);
}

.metaList {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-size-2 $spacing-size-6;
    padding-left: $spacing-size-2;
}

body ul.metaList {
    margin-bottom: 0;
}

.metaItem {
    display: flex;
    flex-direction: column;

    code {
        padding: 0;
        background: transparent;
        background-color: transparent;
        border: none;
    }
}

.metaLabel {
    font-size: var(--text-fs-xs);
    color: var(--color-fg-secondary);
}

.metaValue {
    font-size: var(--text-fs-sm);
    font-family: var(--text-monospace-font-family);
    color: var(--color-fg-code);
    background-color: none;
}

.search {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: $spacing-size-4;

    :global(.input-field.inline) {
        width: 66%;
        flex-wrap: nowrap;
    }

    :global(.input-field.inline) input {
        width: 100%;
        min-width: auto;
    }
}

.isSearching .expandable {
    cursor: unset;

    :global(.icon) {
        display: none;
    }
}
